<template>
  <!-- 首页 -->
  <div>
    <el-row type="flex" justify="space-between">
      <!-- 左侧 -->
      <el-col class="hidden-sm-and-down" :md="3">
        <!-- 技术频道:实际上就是类别 -->
        <el-divider content-position="left">技术频道</el-divider>
        <!-- 类目 -->
        <el-menu
          active-text-color="#ffffff"
          router
          :default-active="$route.path"
        >
          <el-menu-item index="/">推荐</el-menu-item>
          <el-menu-item
            :index="`/${item.id}`"
            v-for="item in CategoryList"
            :key="item.id"
            >{{ item.name }}</el-menu-item
          >
        </el-menu>
      </el-col>
      <!-- 中间 -->
      <el-col :xs="24" :sm="24" :md="16">
        <div class="blog-center">
          <!-- 走马灯 -->
          <div class="banner">
            <el-carousel height="230px">
              <el-carousel-item v-for="item in midAdvertList" :key="item.id">
                <!-- nuxt-link 会作为子路由跳转，而要广告要跳转到外链就需要a标签href才行 -->
                <a :target="item.advertTarget" :href="item.advertUrl">
                  <img :src="item.imageUrl" />
                </a>
              </el-carousel-item>
            </el-carousel>
          </div>
          <!-- 点击左侧列表栏切换文章列表 -->
          <nuxt-child />
        </div>
      </el-col>
      <!-- 右侧 -->
      <el-col class="hidden-sm-and-down" :md="5">
        <el-row>
          <el-col>
            <el-card
              class="right-card"
              shadow="hover"
              :body-style="{ padding: '10px' }"
            >
              <p>课程推荐</p>
              <el-carousel height="210px" indicator-position="none">
                <el-carousel-item
                  v-for="item in rightAdvertList"
                  :key="item.id"
                >
                  <!-- nuxt-link 会作为子路由跳转，而要广告要跳转到外链就需要a标签href才行 -->
                  <a :target="item.advertTarget" :href="item.advertUrl">
                    <img :src="item.imageUrl" />
                    <span>{{ item.title }}</span>
                  </a>
                </el-carousel-item>
              </el-carousel>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Index",
  //获取数据
  async asyncData({ app }) {
    //获取左侧列表数据
    const { data: CategoryList } = await app.$getCategoryList();
    //获取中间轮播图数据
    const { data: midAdvertList } = await app.$getAdvertList(1);
    //获取右侧广告数据
    const { data: rightAdvertList } = await app.$getAdvertList(2);

    return { CategoryList, midAdvertList, rightAdvertList };
  },
};
</script>

<style scoped>
/* 左侧-技术频道 */
.el-menu {
  /* 导航右侧边框 */
  border: 0;
}
.el-menu-item {
  height: 36px;
  line-height: 36px;
  border-radius: 5px;
}
.el-menu-item.is-active {
  background-color: #345dc2;
  color: #757575;
}

/* 中间区域 */
.blog-center {
  margin: 0 10px;
}
/* 走马灯 */
.banner {
  border-radius: 6px;
  overflow: hidden;
}
.banner img {
  height: 230px;
  width: 100%;
}

/* 右侧课程推荐 */
.right-card p {
  color: #345dc2;
  font-size: 16px;
  font-weight: 500;
  margin-top: 0;
}
.right-card a:hover {
  text-decoration: underline;
}
.right-card img {
  width: 100%;
  height: 150px;
  border-radius: 5px;
}
</style>
